<!-- 飞机 -->
<template>
  <el-dialog :modelValue="show" :title="GameName(indexStore.gameArray, 100001) + $t('381')" class="hund-dialog" top="10vh" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="onHideDetails">
    <el-form :model="data.addQuery" class="addQuery" ref="addQuery" :rules="data.rules" 
      :validate-on-rule-change="false" :disabled="isDisableUser" >
      <form-item :title="t('41')" value="game_name">
        <div class="gameIcon">
          <div class="flex marginR5">
            <el-tag size="small">{{ GameCategory(indexStore.gameArray, 100001) }}</el-tag>
            <img class="game-icon" :src="selectToLabel(GAMEICON, 100001)" alt="">
          </div>
          {{ GameName(indexStore.gameArray, 100001) }}
        </div>
      </form-item>
      <form-item :title="$t('249')" :pass="true" value="a_hundred_profitmargin">
        <el-select v-model="data.addQuery.a_hundred_other_details.a_hundred_profitmargin" filterable>
          <el-option v-show="item" v-for="item in 5" :label="item+'%'" :value="item" />
        </el-select>
        <div class="input-text">{{$t('250')}}</div>
      </form-item>
      <form-item :title="$t('956')" :pass="true" value="a_hundred_crash_rate">
        <el-input-number v-model="data.addQuery.a_hundred_other_details.a_hundred_crash_rate" :min="0" :max="100"
          :precision="2" :placeholder="$t('956')" clearable controls-position="right" />%
        <div class="input-text">{{$t('957')}}</div>
      </form-item>
      <form-item :title="$t('260')" class="yxxz-item" :pass="true" value="a_hundred_other_details.a_hundred_stake">
        <div class="flexWrap margin5" v-for="(item, index) in data.gameStakeList" :key="index">
          <div class="xz-label">{{$t('251')}} </div>
          <el-input-number size="large" v-model="item.scale" @change="() => changeNum(item.scale,'scale')" :precision="2"
            class="marginT10" clearable  controls-position="right" />
          <div class="input-text">{{$t('252')}}</div>
          
          <div class="xz-label">{{$t('253')}} </div>
          <el-input-number size="large" v-model="item.min" @change="() => changeNum(item.min,'min')"  :precision="2"
            class="marginT10"  clearable controls-position="right" />
          <div class="input-text">{{$t('254')}}</div> 

          <div class="xz-label">{{$t('255')}} </div>
          <el-input-number size="large" v-model="item.max" @change="() => changeNum(item.max,'max')"  :precision="2"
            class="marginT10"  clearable controls-position="right"  />
          <div class="input-text">{{$t('256')}}</div> 

          <div class="xz-label">{{$t('257')}}</div>
          <el-input-number size="large" v-model="item.default" @change="() => changeNum(item.default,'default')"  :precision="2"
            class="marginT10"  clearable controls-position="right" />
            <div class="input-text">{{$t('258')}}</div> 

          <div class="xz-label">{{$t('259')}}</div>
          <el-input-number size="large" v-model="item.winMax" @change="() => changeNum(item.winMax,'winMax')"  :precision="2"
            class="marginT10" clearable controls-position="right"  />
            <div class="input-text">{{$t('261')}}</div> 

          <div class="xz-label">{{$t('262')}}</div>
          <el-input-number size="large" v-model="item.fast1"  @change="() => changeNum(item.fast1,'fast1')"  :precision="2"
            class="marginT10" clearable controls-position="right" />
            <div class="input-text">{{$t('263')}}</div> 
         
          <div class="xz-label"> {{$t('264')}}</div>
          <el-input-number size="large" v-model="item.fast2" @change="() => changeNum(item.fast2,'fast2')"  :precision="2"
            class="marginT10" clearable controls-position="right"  />
            <div class="input-text">{{$t('263')}}</div> 
          
          <div class="xz-label">{{$t('265')}}</div>
          <el-input-number size="large" v-model="item.fast3" @change="() => changeNum(item.fast3,'fast3')"  :precision="2"
            class="marginT10" clearable controls-position="right" />
            <div class="input-text">{{$t('263')}}</div> 
          
          <div class="xz-label">{{$t('266')}}</div>
          <el-input-number size="large" v-model="item.fast4" @change="() => changeNum(item.fast4,'fast4')"  :precision="2"
            class="marginT10" clearable controls-position="right"  />
            <div class="input-text">{{$t('263')}}</div> 
        </div>
      </form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button @click="onHideDetails">{{$t('240')}}</el-button>
        <el-button type="primary" @click="save" >{{$t('241')}}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive , watch } from 'vue'
import { ElMessage } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { getHundredConfig, updateHundredConfig } from '@/api/settion'
import type { FormInstance, FormRules } from 'element-plus'
import { type GameStake } from '@/types/gameConfig'
import { BigWan, BigTimeWan,BigTimeHundred,BigHundred } from '@/utils/math'
import { otherData } from './hund'
import { GAMEICON } from '@/config/eunm'
import { throttle,selectToLabel, GameCategory, GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: Boolean, //  弹框显示
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  query:{
    type:Object,
    default:() => {
      return {
        id:0, // 飞机 id 
        type:0 , //查看1 或者编辑0
        agent_id:0, // 商户id
        game_id:0 , // 游戏id
        game_name:'' , // 游戏名称
      }
    }
  }
})

const data = reactive({
  addQuery: {
    // pool:0,
    id: 0,
    a_hundred_other_details: {
      a_hundred_crash_rate:0, // 飞机坠毁控制配置
      a_hundred_profitmargin:3, // 利润率
      a_hundred_stake:'', // 游戏下注
      a_hundred_repeat:'' // 连续避重
    },
  },
  rules: {
    'a_hundred_other_details.a_hundred_profitmargin': [{ required: true, message: t('19'), trigger: 'blur' }],
  },
  gameStakeList:<GameStake[]>[] , // 游戏下注
  repeatList:[] as any,
  levelQuery:{}
})


const addQuery = ref<FormInstance>()
watch(
  () => props.show,
  async (show) => {
    if (show) {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') as string)
      const [res]  = await Promise.all([getHundredConfig({ agent_id: userInfo.id,game_id: 100001 })]) 
      data.addQuery = Object.assign(data.addQuery, res.data)
      // 处理数据
      getData()
    }
  }
)

// 处理数据
const getData = () => {
  // 游戏下注
  if (data.addQuery.a_hundred_other_details.a_hundred_stake) {
    let str = data.addQuery.a_hundred_other_details.a_hundred_stake;
    let newArr =  str.split(';').map((item) => {
      return item.split(',')
    });
    data.gameStakeList = [{
      scale: BigWan(+newArr[0][0]),
      min: BigWan(+newArr[0][1]),
      max: BigWan(+newArr[0][2]),
      default: BigWan(+newArr[0][3]),
      winMax: BigWan(+newArr[0][4]),
      fast1: BigWan(+newArr[1][0]),
      fast2: BigWan(+newArr[1][1]),
      fast3: BigWan(+newArr[1][2]),
      fast4: BigWan(+newArr[1][3])
    }]
  } else {
    data.gameStakeList = [{
      scale: 0,
      min: 0,
      max: 0,
      default: 0,
      winMax: 0,
      fast1: 0,
      fast2: 0,
      fast3: 0,
      fast4: 0
    }]
  }
  // 飞机坠毁控制配置
  if (data.addQuery.a_hundred_other_details.a_hundred_crash_rate) {
    data.addQuery.a_hundred_other_details.a_hundred_crash_rate = BigHundred(data.addQuery.a_hundred_other_details.a_hundred_crash_rate)
  }

  // 利润率
  if (data.addQuery.a_hundred_other_details.a_hundred_profitmargin) {
    data.addQuery.a_hundred_other_details.a_hundred_profitmargin = BigTimeHundred(data.addQuery.a_hundred_other_details.a_hundred_profitmargin)
  } else {
    data.addQuery.a_hundred_other_details.a_hundred_profitmargin = 0
  }
}

const changeNum = (val:number,name:any) => {
  if (!val) {
    data.gameStakeList[0][name] = 0
  }
}


// 转换游戏下注传到服务器
const setData = (arr:GameStake[]):string => {
  let valArr = Object.values(arr[0]).map((item) => {
    if (item == 0) return 0
    return BigTimeWan(item)
  })
  let Larr = valArr.splice(5,valArr.length);
  let Farr = valArr.splice(0,5);
  let str = Farr.join(',') + ';' + Larr.join(',')
  return str
}
// 转换利润率
const setMargin = (val:number):number => {
  if (val == 0) return 0
  return (val * 100)
}

// 保存
const save = throttle( async () => {
  if (!addQuery.value) return
  
  // 游戏下注转成字符串
  let query = JSON.parse(JSON.stringify(data.addQuery));
  let list = JSON.parse(JSON.stringify(data.gameStakeList));
  query.a_hundred_other_details.a_hundred_stake = data.addQuery.a_hundred_other_details.a_hundred_stake = setData(list)
  query.a_hundred_other_details.a_hundred_profitmargin = setMargin(query.a_hundred_other_details.a_hundred_profitmargin)
  query.a_hundred_other_details.a_hundred_crash_rate = BigTimeHundred(query.a_hundred_other_details.a_hundred_crash_rate)
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      query = otherData(query)
      // let waterQuery = {
      //   game_id:props.query.game_id,
      //   pool:BigTimeWan(query.pool)
      // }
      // ,changeWaterLevel(waterQuery) 
      await Promise.all([updateHundredConfig(query)]) 
      ElMessage({
        message: t('342'),
        type: 'success'
      })
      onHideDetails()
    }
  })
}, 3000)

// 取消
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.input-text{
  display: block;
  flex-basis:100%;
  font-size: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  padding-left: 10px;
}
.xz-label{
  width: 220px;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0 0 10px
}


</style>
<style lang="scss">
.hund-dialog .el-dialog__body{
  height: 650px;
  overflow: auto
}
</style>